<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
			width: 200px;
			height: 200px;
			background-color: blue;
		}
		.inner{
			width: 100px;
			height: 100px;
			background: red;
		}
		.insert{
			width: 50px;
			height: 50px;
			background-color: orange;
		}
    </style>
</head>
<body>
    <div class="box">
        <div class="inner">
            <div class="insert"></div>
        </div>
    </div>
    <a href="https://www.baidu.com" id="to" onclick="">百度</a>

    <form action="/abc" id="formEle">
		<input type="text" value="张三" name="uname">
		<button type="submit" id="btn">提交</button>
    </form>
    
    <script>
        var box = document.querySelector('.box');
        var inner = document.querySelector('.inner');
        var insert = document.querySelector('.insert');

        box.onclick = inner.onclick = insert.onclick = function () {
            // event.stopPropagation();
            // event.cancelBubble = true;
            // 兼容写法
            event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true;
            console.log(event.currentTarget);
        }

        // 默认事件  表单提交   /a跳转
        to.onclick = function () {
            event.preventDefault();
        }
        // function fn() {
        //     event.preventDefault();
        // }
        // btn.onclick = function () {
        //     // event.preventDefault();
        //     return false;
        // }
        formEle.onsubmit = function () {
            console.log('ss');
            event.preventDefault ? event.preventDefault() : event.returnValue = false;
        }
    </script>
</body>
</html>